<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- layui css -->
        <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
        <!-- layui js  引入layui.js为按需引入相关模块功能，layui.use()-->
        <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    </head>
    <body>

        <!--        定义一个版心容器， 里面装数据表格-->
        <div class="layui-container">
            <!--            lay-filter, 行工具栏如删除、编辑中触发相应的事件时使用到-->
            <table id="tableId" lay-filter="test"></table>
            <button id="addEmpId" type="button" class="layui-btn layui-btn-fluid">增加员工</button>
        </div>
    </body>

    <script>

        // layui开始
        layui.use(['table', 'layer'], function () {
            // 引用相关的变量， 数据表格 、弹出层 、jquery
            var table = layui.table;
            let layer = layui.layer;
            var $ = layui.jquery;


            // 新增按钮 监听事作，触发弹出层
            $("#addEmpId").click(function (e) {
                console.log("点新增员工按钮啦......")
                layer.open({
                    type: 2,
                    content: 'add_emp.html' //这里content是一个普通的String或是一个html页面
                    , area: ['500px', '500px']
                    , title: ['添加员工', 'font-size:18px;']
                    , end: function () { // 弹出层关闭时，会调用， 通常会在关闭后渲染数据表格
                        console.log("新增弹出层已关闭 ")
                        table.reload('tableId') // 这是表格重载，这里的id是在定定义表格时，增加的属性
                    }
                });
            });

            //行工具栏监听
            table.on('tool(test)', function (obj) {
                // var checkStatus = table.checkStatus(obj.config.id);
                console.log("来到的行工具栏监听事件:", obj)
                switch (obj.event) {
                    case 'del':
                        // layer.msg('删除');
                        console.log("来到的删除操作");
                        layer.confirm('真的删除行么', function (index) {
                            //向服务端发送删除指令
                            $.get("http://localhost:8080/delEmp?empId=" + obj.data.empId, function (d) {
                                console.log("删除 返回的数据:", d)
                                if (d.code == 200) {
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    layer.msg(d.msg);
                                } else {
                                    layer.msg(d.msg);
                                }
                            })
                        });
                        break;
                    case 'edit':
                        // layer.msg('编辑');
                        console.log("来到的编辑操作")
                        layer.open({
                            type: 2,
                            content: './update_emp.html?depId=' + obj.data.depId + "&sex=" + obj.data.sex //这里content是一个普通的String
                            , area: ['500px', '500px']
                            , title: ['更新员工', 'font-size:18px;']
                            , end: function () {
                                console.log("close ")
                                table.reload('tableId') // 这是表格重载，这里的id是在定定义表格时，增加的属性
                            }
                            , success: function (layero, index) { //弹出层显示完成时，可以从母版中传数据到弹出层
                                console.log("可获取弹出层的dom", layero, index, obj);

                                //根据母版的数据将数据传到弹出层进行返显
                                var body = layer.getChildFrame('body', index);
                                body.find("input[name='empName']").val(obj.data.empName);
                                body.find("input[name='age']").val(obj.data.age);
                                body.find("input[name='hireDate']").val(obj.data.hireDate.split(" ")[0]);
                                body.find("input[name='empId']").val(obj.data.empId);

                                // select  & radio 之类的数据在弹出层反显出bug ， 参看传参url
                                console.log("=====>", obj.data.sex == 1);
                                // body.find("input[name='sex'][value=1]").prop("checked",obj.data.sex == 1 ? true : false)
                                // body.find("input[name='sex'][value=2]").prop("checked", obj.data.sex == 2 ? true : false)
                                // body.find("#depId_").val(obj.data.depId); /// 无效， 有bug
                                // body.form.render()
                            }
                        });
                        break;
                }
                ;
            });

            //宣染数据表格
            table.render({
                elem: '#tableId'  // 绑定需要渲染的表格元素
                , id: 'tableId'
                , url: 'http://localhost:8080/listEmp' //数据接口
                , parseData: function (res) { //res 即为原始返回的数据,返回的数据需要与layui数据表格要的数据格式进行映射
                    console.log("异步调用列表接口返回的数据:", res);
                    return {
                        "code": res.code == 200 ? 0 : res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.obj.count, //解析数据长度
                        "data": res.obj.data //解析数据列表
                    };
                },
                request: {    // 分页参数自定义
                    pageName: 'pageIndex' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                limit: 2   // 界面分页下拉列表
                , limits: [2, 4, 6, 8, 10]  // 此处必需为limit的倍数
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'empId', title: '员工编号', sort: true},
                    {field: 'empName', title: '员工姓名', sort: true},
                    {field: 'age', title: '员工年龄', sort: true},
                    {
                        field: 'sex', title: '性别', sort: true,
                        templet: function (d) {  //自定义数据显示映射
                            console.log("======>",d.sex,d)
                            return d.sex == 1 ? '男' : '女'
                        }
                    },
                    {
                        field: 'hireDate', title: '入职时间', sort: true,
                        templet: function (d) {
                            let date = d.hireDate;
                            sp = date.split(" ")
                            return sp[0];
                        }

                    },
                    {
                        field: 'depName', title: '部门名称', sort: true,
                        templet: function (d) {
                            return d.dep.depName
                        }
                    },
                    {
                        field: 'depName', title: '操作', sort: true, align: 'center',
                        templet: function (d) {
                            /// 自定行工具栏操作: lay-event:::
                            str = "<button id='delId' type=\"button\" lay-event=\"del\" class=\"layui-btn layui-btn-sm \">删除</button>"
                            str += "<button id='editId' type=\"button\"  lay-event=\"edit\" class=\"layui-btn layui-btn-sm \">编辑</button>"
                            return str;
                        }
                    },

                ]]


            });

        });


    </script>
</html>
